<template>
	<view class="container">
		<view class="cont">
			反馈内容
		</view>
		<view class="texta">
			<u--textarea v-model="value1" height="150" placeholder="请输入你要反馈的内容"></u--textarea>
		</view>
		
		<view class="up">
			上传图片
		</view>
		
		<view class="load">
			<u-upload :fileList="fileList1" uploadIconColor="#FFFFFF" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="99">
			</u-upload>
		</view>
		
		<view class="bottom_btn">
			<view class="btn" @click="putinfo">提交</view>
		</view>
		
		<!-- <view class="btn" @click="putinfo">
			提交
		</view> -->
		
	</view>
</template>

<script>
	export default{
		data(){
			return{
				fileList1: [],
				value1:'',
				imgname: '',
			}
		},
		onLoad() {
			
		},
		methods:{
			// 图片处理
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
			
				let lists = [].concat(event.file)
				// console.log(lists)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
			
					const result = await this.uploadFilePromise(lists[i].url)
					// console.log(result)
					if (result) {
						let item = this[`fileList${event.name}`][fileListLen]
						this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: this.$oss(result),
							ful: result
						}))
						fileListLen++
					} else {
						this[`fileList${event.name}`].splice(fileListLen, 1)
					}
			
				}
				// console.log(this[`fileList${event.name}`])
			
				let list = []
				for (let i = 0; i < this[`fileList${event.name}`].length; i++) {
					list.push(this[`fileList${event.name}`][i].ful.url)
				}
				this.imgname = list.join(",")
			
			},
			uploadFilePromise(url) {
				// console.log(url)
				let that = this
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: that.$uploadUrl, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							type: 'image',
							token: uni.getStorageSync('token')
						},
						success: (res) => {
			
							let data = JSON.parse(res.data)
							if (res.statusCode === 200 && data.code === 1 && data.data) {
								resolve(
									data.data
								)
					
			
							} else {
								resolve()
							}
			
						}
					});
				})
			},
			// 提交意见
			putinfo(){
				this.$api.post('/feedback', {
					content: this.value1,
					images: this.imgname
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						uni.$u.toast(res.msg);
						this.value1 = '',
						this.fileList1 = [],
						this.imgname = ''
					}
				}).catch((res) => {
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		background-color: #ffffff;
		
		/deep/ .u-textarea {
			background-color: #f5f5f5;
		}
		
		/deep/ .u-upload__button{
			background-color: #f5f5f5;
		}
		
		.cont{
			padding-top: 40rpx;
			margin-bottom: 20rpx;
			margin-left: 30rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		
		.texta{
			margin: 0rpx 30rpx;
		}
		
		.up{
			margin-top: 40rpx;
			margin-bottom: 20rpx;
			margin-left: 30rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		
		.load{
			margin-left: 30rpx;
		}
		
		.bottom_btn{
			width: 750rpx;
			height: 190rpx;
			background: #FFFFFF;
			box-shadow: inset 0rpx 1rpx 0rpx 0rpx #EBEBEB;
			overflow: hidden;
			position: fixed;
			bottom: 0;
			.btn{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 686rpx;
				height: 96rpx;
				background: #00CE9B;
				border-radius: 48rpx;
				margin: 20rpx auto 0;
				font-size: 28rpx;
				font-weight: 500;
				color: #FFFFFF;
			}
		}
	}
</style>